<template>
	<div class="sharing_detail_wrapper">
		<div class="header">
			<div class="info">
				<span>查看：{{ articleData.clickCount }}</span>
				<span>回复：{{ dataCount }}</span>
			</div>
			<div class="title">{{ articleData.title }}</div>
		</div>
		<div class="subject">
			<div class="person">
				<h4>{{ articleData.author }}</h4>
				<!-- <img src="" alt="" /> -->
				<p>{{ articleData.pubDate }}</p>
			</div>
			<div class="content">
				<div class="text" v-html="articleData.content"></div>
			</div>
		</div>
		<div class="comment" v-for="(item, index) in commentListData" :key="index">
			<div class="person">
				<h4>匿名用户</h4>
				<p>{{ item.createTime }}</p>
				<!-- <img src="" alt="" /> -->
			</div>
			<div class="content">
				<div class="text" v-html="item.content"></div>
				<div class="reply">
					<p v-for="(n, i) in item.childList" :key="i">回复：{{ n.content }}</p>
				</div>
				<el-button type="text" @click="handleReplayComment(item.id)">回复</el-button>
			</div>
		</div>
		<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" notice="数据" @change="getArticleComment"></sw-pagination>
		<div class="replybox">
			<h3>发表评论</h3>
			<sw-ueditor v-model="commentContent" :ueWidth="1280"></sw-ueditor>
			<el-button type="primary" @click="handlePublishComment">发表</el-button>
		</div>
		<el-dialog width="730px" title="回复评论" :visible.sync="replyDialog" append-to-body :close-on-click-modal="false">
			<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 8 }" v-model="replyContent" placeholder="输入内容…"></el-input>
			<template slot="footer">
				<el-button size="medium" @click="replyDialog = false">取消</el-button>
				<el-button size="medium" type="primary" @click="handleSubmitReply">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
import swUeditor from '../message/ueditor';
import { addEvaluateRequest } from '@/api/web/sysEvaluate';
export default {
	components: { swUeditor },
	data() {
		return {
			articleData: {},
			dataCount: 0,
			replyContent: '',
			commentContent: '',
			queryData: { page: 1, limit: 10 },
			commentListData: [],
			replyDialog: false,
			replyForm: {}
		};
	},
	computed: {
		articleId() {
			return this.$route.params.id;
		}
	},
	mounted() {
		this.getArticleDetail();
		this.getArticleComment();
	},
	methods: {
		...mapActions(['getNewsDetail', 'getCommentData']),
		//获取文章详情
		async getArticleDetail() {
			this.articleData = await this.getNewsDetail(this.articleId);
		},

		//获取文章评论
		async getArticleComment() {
			let params = { ...this.queryData, type: '1', resType: '12', resId: this.articleId };
			let result = await this.getCommentData(params);
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.commentListData = result.data || [];
			}
		},

		//发表意见
		handlePublishComment() {
			let params = { content: this.commentContent, type: '1' };
			if (!this.commentContent) {
				this.$message.warning('请输入要发表的内容');
				return false;
			}
			this.commentRequest(params);
		},

		//回复评论
		handleReplayComment(id) {
			this.replyDialog = true;
			this.replyForm = { pid: id, score: 0 };
		},

		//提交回复
		handleSubmitReply() {
			let params = { ...this.replyForm, content: this.replyContent, type: '2' };
			if (!this.replyContent) {
				this.$message.warning('请输入要回复的内容');
				return false;
			}
			this.commentRequest(params);
		},

		//添加体会交流请求
		async commentRequest(data) {
			let params = { ...data, resId: this.articleId, resType: '12' };
			let result = await addEvaluateRequest(params).then((res) => res.data);
			this.btnLoading = false;
			if (result.code === '0') {
				this.replyContent = '';
				this.commentContent = '';
				this.replyDialog = false;
				this.getArticleComment();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.sharing_detail_wrapper {
	padding-bottom: 64px;
	.header {
		display: flex;
		height: 40px;
		line-height: 40px;
		border: solid 1px #ebeef5;
		.info {
			width: 190px;
			padding: 0 5px;
			flex-shrink: 0;
			border-right: solid 1px #ebeef5;
			span {
				color: #909399;
				padding: 0 5px;
			}
		}
		.title {
			flex: 1;
			padding: 0 15px;
			overflow: hidden;
			font-size: 18px;
			font-weight: bold;
		}
	}
	.subject,
	.comment {
		display: flex;
		border: solid 1px #ebeef5;
		border-top: none;
	}
	.person {
		width: 160px;
		padding: 20px;
		flex-shrink: 0;
		color: #606266;
		line-height: 24px;
		background-color: #f2f6fc;
		border-right: solid 1px #ebeef5;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		flex: 1;
		overflow: hidden;
		.text {
			padding: 20px;
			font-size: 18px;
			line-height: 2em;
		}
		.reply {
			padding: 0 20px;
			p {
				background-color: #f2f6fc;
				line-height: 24px;
				padding: 5px 15px;
				border-top: solid 1px #ebeef5;
				&:first-child {
					border-top: none;
				}
			}
		}
		.el-button {
			margin-left: 20px;
			color: #909399;
		}
	}
	.el-pagination {
		margin-top: 24px;
	}

	.replybox {
		margin-top: 24px;
		h3 {
			margin-bottom: 16px;
		}
		.el-button {
			margin-top: 16px;
			border-color: #357c65;
			background-color: #357c65;
		}
	}
}
</style>
